<template>
	<view class="customer-manage">
		<view class="content">
			<view class="member-statistic">
				<view class="grid-item">
					<text class="label">全部客户</text>
					<text class="value">{{dataInfo.total_customer}}</text>
				</view>

				<view class="grid-item">
					<text class="label">沉默客户</text>
					<text class="value">{{dataInfo.silent_customer}}</text>
				</view>

				<view class="grid-item">
					<text class="label">有架子客户</text>
					<text class="value">{{dataInfo.have_shelf}}</text>
				</view>

				<view class="grid-item">
					<text class="label">无架子客户</text>
					<text class="value">{{dataInfo.no_shelf}}</text>
				</view>
			</view>
			<view class="customer-statistic">
				<view class="grid-item">
					<text class="label">家庭客户</text>
					<text class="value">{{dataInfo.family_customer}}</text>
				</view>

				<view class="grid-item">
					<text class="label">企业客户</text>
					<text class="value">{{dataInfo.enterp_customer}}</text>
				</view>

				<view class="grid-item">
					<text class="label">街边店铺</text>
					<text class="value">{{dataInfo.street_shop}}</text>
				</view>
			</view>

			<view class="filters">
				<view class="filters-item">
					<uni-data-select v-model="params.factor" :localdata="factorList"
						@change="changeFactor"></uni-data-select>
				</view>
				<view class="filters-item" v-if="params.factor==1">
					<uni-data-select v-model="params.customer_type" :localdata="customerTypeList"
						@change="changeCustomerType"></uni-data-select>
				</view>
				<view class="filters-item area-opt" v-if="params.factor==2">
					<uni-data-select class="area-item" v-model="params.province" :localdata="provinceList"
						@change="getCity"></uni-data-select>
					<uni-data-select class="area-item" v-model="params.city" :localdata="cityList"
						@change="getArea"></uni-data-select>
					<uni-data-select class="area-item" v-model="params.area" :localdata="areaList"
						@change="getRegion"></uni-data-select>
				</view>
				<view class="filters-item" v-if="params.factor==3">
					<uni-data-select v-model="params.spread_type" :localdata="sourceList"
						@change="changeSpreadType"></uni-data-select>
				</view>
			</view>

			<view class="member-list">
				<view class="member-item" v-for="(item,index) in customerList" :key="index">
					<view class="bd"
						@click="pageRoute('/pages/customer-manage/customer-detail?customer_id=' + item.id + '&spread_type=' + spread_type)">
						<view class="user">
							<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
							<view class="user-left">
								<view class="top-box">
									<view>
										<text class="tags" v-if="item.customer_type==1">家庭客户</text>
										<text class="tags" v-if="item.customer_type==2">企业客户</text>
										<text class="tags" v-if="item.customer_type==3">街边店铺</text>
									</view>
									<view class="date" v-if="item.service_type==2">
										定期送水:
										<text class="value" v-if="item.regular_type==1">每周{{item.week}}</text>
										<text class="value" v-if="item.regular_type==2">{{item.service_date}}号/月</text>
										<text class="value" v-if="item.regular_type==3">间隔{{item.service_date}}天</text>
									</view>
								</view>
								<view class="user-info">
									<text class="name">{{item.customer_name}}</text>
									<text class="phone">{{item.mobile}}</text>
								</view>
								<view class="address">{{item.format_address}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="empty-data" v-if="customerList.length===0">暂无客户信息</view>
			</view>
		</view>

		<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" :popMenu="false" @fabClick="fabClick" />
		<!-- <view class="footer">
			<view class="btn-group">
				<u-button type="primary" size="large" block
					@click="pageRoute('/pages/customer-manage/customer-form?spread_type=' + spread_type)">客户信息采集</u-button>
			</view>
		</view> -->
	</view>
</template>
<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
		defineProps,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	defineOptions({
		name: 'customer-manage'
	});

	onMounted(() => {
		console.log('组件已挂载');
		// 这里可以执行需要在DOM挂载后执行的代码
		initData();
	});

	const props = defineProps({
		spread_type: {
			type: Number,
			default: '0'
		},
		store_id: {
			type: Number,
			default: '0'
		},
	});

	const state = reactive({
		title: '客户管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		dataInfo: {
			total_customer: 0,
			silent_customer: 0,
			have_shelf: 0,
			no_shelf: 0,
			family_customer: 0,
			enterp_customer: 0,
			street_shop: 0,
		},
		keyword: '',
		params: {
			factor: 0,
			customer_type: 0,
			province: 0,
			city: 0,
			area: 0,
			spread_type: 0,
			skip: 0,
		},
		isMore: true,
		customerList: [],
		pattern: {
			buttonColor: '#007AFF',
			iconColor: '#fff',
			icon: 'plusempty',
		},
	});

	const factorList = ref([]);
	const customerTypeList = ref([]);
	const sourceList = ref([]);
	const provinceList = ref([]);
	const cityList = ref([]);
	const areaList = ref([]);

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多111');
	})

	function initData() {
		getStatsData();
		getCustomerList();
		factorList.value = [{
			value: 0,
			text: '全部',
			disable: false,
		}, {
			value: 1,
			text: '客户类型',
			disable: false,
		}, {
			value: 2,
			text: '客户区域',
			disable: false,
		}, {
			value: 3,
			text: '客户来源',
			disable: false,
		}];
		customerTypeList.value = [{
			value: 0,
			text: '全部',
			disable: false,
		}, {
			value: 1,
			text: '家庭客户',
			disable: false,
		}, {
			value: 2,
			text: '企业客户',
			disable: false,
		}, {
			value: 3,
			text: '街边店铺',
			disable: false,
		}];
		sourceList.value = [{
			value: 0,
			text: '全部',
			disable: false,
		}, {
			value: 1,
			text: '商户',
			disable: false,
		}, {
			value: 2,
			text: '门店',
			disable: false,
		}, {
			value: 3,
			text: '代理',
			disable: false,
		}, {
			value: 4,
			text: '水工',
			disable: false,
		}, {
			value: 5,
			text: '员工',
			disable: false,
		}];
		state.customerList = [{
			id: 1,
			avatar: state.imgHost + '/static/images/logo.png',
			customer_type: 1,
			service_type: 2,
			regular_type: 1,
			week: 2,
			service_date: 15,
			customer_name: '张三',
			mobile: '15912345678',
			format_address: '云南省昆明市五华区金顶山北路金鼎科技园18号平台A座101'
		}, {
			id: 2,
			avatar: state.imgHost + '/static/images/logo.png',
			customer_type: 2,
			service_type: 2,
			regular_type: 2,
			week: 2,
			service_date: 15,
			customer_name: '张三',
			mobile: '15912345678',
			format_address: '云南省昆明市五华区金顶山北路金鼎科技园18号平台A座101'
		}, {
			id: 3,
			avatar: state.imgHost + '/static/images/logo.png',
			customer_type: 3,
			service_type: 1,
			regular_type: 2,
			week: 2,
			service_date: 15,
			customer_name: '张三',
			mobile: '15912345678',
			format_address: '云南省昆明市五华区金顶山北路金鼎科技园18号平台A座101'
		}]
	}

	function getStatsData() {
		let params = {
			store_id: props.store_id,
			spread_type: props.spread_type,
		};
		request.get('customer/index', params).then(res => {
			console.log('数据', res);
			state.dataInfo = res.data;
		})
	}

	function getCustomerList() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return
		}
		state.params.store_id = props.store_id;
		state.params.spread_type = props.spread_type;
		state.params.skip = state.customerList.length;
		request.get('customer/list', state.params).then(res => {
			console.log('客户列表', res);
			state.isMore = res.data.is_more;
			if (state.customerList.length == 0) {
				state.customerList = res.data.list;
			} else {
				state.customerList = state.customerList.concat(res.data.list);
			}
		})
	}

	function fabClick() {
		console.log('点击悬浮按钮');
		pageRoute('/pages/customer-manage/customer-form?spread_type=' + props.spread_type);
	}

	function changeFactor(e) {
		console.log('选择筛选条件', e);
		state.params.factor = e;
	}

	function changeCustomerType(e) {
		console.log('客户类型', e);
		state.params.customer_type = e;
	}

	function changeSpreadType(e) {
		console.log('客户类型', e);
		state.params.spread_type = e;
	}

	function getProvince() {}

	function getCity() {}

	function getArea() {}

	function getRegion() {}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		dataInfo,
		keyword,
		params,
		isMore,
		customerList,
		pattern
	} = toRefs(state);
</script>

<style lang="scss">
	.customer-manage {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.content {
			padding: $m24 $m24 0;

			.member-statistic {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: $m12;
				padding: $m8;
				overflow: hidden;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;

				.grid-item {
					display: flex;
					flex-direction: column;
					flex: 1;
					padding: $m24;

					.label {
						font-size: $font-24;
					}

					.value {
						font-size: $font-36;
						color: $primary-color;
					}
				}
			}

			.customer-statistic {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: $m12;
				padding: $m8;
				overflow: hidden;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;

				.grid-item {
					display: flex;
					flex-direction: column;
					flex: 1;
					padding: $m24;

					.label {
						font-size: $font-24;
					}

					.value {
						font-size: $font-36;
						color: $primary-color;
					}
				}
			}

			.filters {
				display: flex;

				.filters-item {
					width: 180rpx;
				}

				.area-opt {
					display: flex;
					width: auto;

					.area-item {
						width: 180rpx;
					}
				}
			}

			.member-list {
				overflow: hidden;

				.member-item {
					margin-bottom: $m24;
					padding: 0 $m24;
					background-color: #fff;
					border-radius: $radius-16;

					.bd {
						padding: $m16 0;

						.user {
							font-size: $font-24;
							display: flex;
							align-items: center;

							.avatar {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
							}

							.user-left {
								margin-left: 10rpx;

								.top-box {
									@include f-between;

									.tags {
										font-size: $font-24;
										color: $tips-color;
										background-color: mix($white-color, $primary-color, 84%);
										border-radius: $radius-16;
										padding: $m8 $m16;
										border-bottom: 1rpx solid $border-color;
									}

									.date {
										font-size: $font-24;
										color: $tips-color;
									}

									.value {
										color: $main-color;
										font-weight: 600;
									}
								}
							}

							.user-info {
								.name {
									font-size: $font-32;
									color: $main-color;
									font-weight: 600;
								}

								.phone {
									margin-left: $m8;
								}
							}

							.address {
								font-size: $font-24;
								color: $tips-color;
							}
						}
					}
				}

				.empty-data {
					margin-bottom: $m24;
					padding: $m24;
					background-color: #fff;
					border-radius: $radius-16;
					text-align: center;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>